<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>overlay</title>
<link rel="stylesheet" type="text/css" media="screen"
	href="/i-webmonitor/application/resources/css/smoothness/jquery-ui-1.8.23.custom.css" />


<style>

#navCol { width:250px; float:left; }
#contentCol { float:left; }
#contentCol h1 { text-indent:20px; font-family:Georgia; }
#navCol .ui-accordion-header {
display:block; padding-left:40px;
}
.ui-accordion-content a {
font-size:70%; text-decoration:none; display:block;
}
.ui-accordion-content a:hover { text-decoration:underline; }

.background-div {
height:50px; width:217px; padding:36px 0 0 24px;
background:url(/i-webmonitor/application/resources/images/slider/slider_outerbg.gif) no-repeat;
}
#mySlider {
width:184px; height:23px; border:none; position:relative;
left:4px; top:4px;
background:url(/i-webmonitor/application/resources/images/slider/slider_bg.gif) no-repeat;
}
#mySlider .ui-slider-handle {
width:14px; height:30px; top:-4px;
background:url(/i-webmonitor/application/resources/images/slider/slider_handle.gif) no-repeat;
}
#drag {
width:114px; height:114px; cursor:move;
background:url(/i-webmonitor/application/resources/images/slider/slider_handle.gif) no-repeat;
}
#handle {
width:30px; height:30px; border-bottom:2px solid #ff0000;
border-left:2px solid #ff0000; position:absolute;
right:10px; top:10px; cursor:move;
}
</style>

<script src="/i-webmonitor/application/resources/js/jquery-1.8.0.min.js"
	type="text/javascript"></script>
<script
	src="/i-webmonitor/application/resources/js/jquery-ui-1.8.23.custom.min.js"
	type="text/javascript"></script>

<script type="text/javascript">
$(document).ready( function(){
	var tabOpts = {
			fx: {
				opacity: "toggle",
				duration: "slow"
					
				},
			collapsible: true
			};
	var accOpts = {
			navigation: true
			};
	var sliderOpts = {
			
			animate: true
			};
	var progressOpts = {
			value: 50
			};
	$("#myTabs").tabs(tabOpts);
	$("#navCol").accordion(accOpts);
	$("#mySlider").slider(sliderOpts);
	$("#myProgressbar").progressbar(progressOpts);
	$("#myButton").button();
	$("#buttons").buttonset();

	var autoOpts = {
			source: [
			"Aberdeen", "Armagh", "Bangor", "Bath", "Canterbury",
			"Cardiff",
			"Derby", "Dundee", "Edinburgh", "Exeter", "Glasgow",
			"Gloucester",
			"Hereford", "Inverness", "Leeds", "London", "Manchester",
			"Norwich",
			"Newport", "Oxford", "Plymouth", "Preston", "Ripon",
			"Southampton",
			"Swansea", "Truro", "Wakefield", "Winchester", "York"
			]
			};
			$("#city").autocomplete(autoOpts);

			var dragOpts = {
					
						helper: "clone"
					};
			
			$("#drag").draggable(dragOpts);
			
});
</script>
</head>

<body>
<div id="drag"></div>


<label>Enter your city:</label>
<input id="city">

<div id="buttons">
<h2>Programming Languages</h2>
<p>Select all languages you know:</p>
<label for="js">JavaScript</label>
<input id="js" type="checkbox">
<label for="py">Python</label>
<input id="py" type="checkbox">
<label for="cSharp">C#</label>
<input id="cSharp" type="checkbox">
<label for="jv">Java</label>
<input id="jv" type="checkbox">
</div>

<div class="background-div">
<div id="mySlider">
</div>
</div>
<div id="myProgressbar">
</div>
<div id="container" class="ui-helper-clearfix">
<div id="navCol">
<h2><a href="#me" title="About Me">About Me</a></h2>
<div>
<a href="accordionMe.html#me" title="Bio">My Bio</a>
<a href="accordionMe.html#me" title="Contact Me">Contact Me</a>
<a href="accordionMe.html#me" title="Resume">My Resume</a>
</div>
<h2><a href="#js" title="JavaScript">JavaScript</a></h2>
<div>
<a href="accordionJS.html#js" title="Tutorials">Tutorials</a>
<a href="accordionJS.html#js" title="AJAX">AJAX</a>
<a href="accordionJS.html#js" title="JavaScriptApps">JavaScript Apps</a>
</div>
</div>
<div id="contentCol">
<h1>Page 1</h1>
</div>
</div>
<a href="some_other_page.html" id="myButton">A link button</a>
</body>
</html>
